<template>
    <div class="page">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                    <a href="#" class="link back">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">返回</span>
                    </a>
                </div>
                <div class="title">{{js 'return (this.$route.params.metername)'}} 详细</div>
            </div>
        </div>
        <div class="page-content">
            <div class="block block-strong">
                <!-- <p>{{js 'return (this.$route.params.metername)'}}</p> -->
                <div id="id-chart-tem" style="height:350px;">
                </div>
                <div id="id-chart-humi" style="height:350px;">
                </div>
            </div>
            <!-- <div class="block-title">Extended Context</div>
            <div class="block block-strong">
                <p>Template7 page context is extended with some additional variables.</p>

                <h4>$route</h4>
                <p>Contains properties of the current route:</p>
                <ul style="padding-left:25px">
                    <li>
                        <b>$route.url</b>: {{$route.url}}</li>
                    <li>
                        <b>$route.path</b>: {{$route.path}}</li>
                    <li>
                        <b>$route.params</b>: {{js 'return JSON.stringify(this.$route.params)'}}</li>
                    <li>
                        <b>$route.hash</b>: {{$route.hash}}</li>
                    <li>
                        <b>$route.query</b>: {{js 'return JSON.stringify(this.$route.query)'}}</li>
                </ul>

                <h4>$root</h4>
                <p>Root app data:</p>
                <ul style="padding-left:25px">
                    <li>
                        <b>$root.user.firstName</b>: {{$root.user.firstName}}</li>
                    <li>
                        <b>$root.user.lastName</b>: {{$root.user.lastName}}</li>
                </ul>

                <h4>$theme</h4>
                <p>Currently active theme:</p>
                <ul style="padding-left:25px">
                    <li>
                        <b>$theme.ios</b>: {{$theme.ios}}</li>
                    <li>
                        <b>$theme.md</b>: {{$theme.md}}</li>
                </ul>
            </div> -->
        </div>
    </div>
</template>
<script>

    return {
        on: {
            pageInit: function (e, page) {
                // do something on page init
                var self = this;
                //self.$app.dialog.alert('Hello world!');
                //console.info('history_detail.html Init');
                var params = this.$route.params;
                //this.$root.helloWorld(); // -> call alert
                //self.$app.dialog.alert(JSON.stringify(params));

                //echarts
                //保留小数点后指定位数的
                function formatFloat(src, pos) {
                    return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos);
                }

                var charttem = echarts.init(document.getElementById('id-chart-tem'));
                var charthumi = echarts.init(document.getElementById('id-chart-humi'));
                var charttemOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['温度(℃)']
                    },
                    toolbox: {
                        show: true,
                        top:20,
                        right: 30,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ['line', 'bar'] },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    series: [
                        {
                            name: '温度(℃)',
                            type: 'line',
                            data: [],
                            //areaStyle: {normal: {}},
                            itemStyle: {
                                normal: {
                                    // 设置颜色
                                    color: '#00a65a'
                                }
                            },
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                };
                var charthumiOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['湿度(%RH)']
                    },
                    toolbox: {
                        show: true,
                        top:20,
                        right: 30,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ['line', 'bar'] },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    series: [
                        {
                            name: '湿度(%RH)',
                            type: 'line',
                            data: [],
                            //areaStyle: {normal: {}},
                            itemStyle: {
                                normal: {
                                    // 设置颜色
                                    color: '#00a65a'
                                }
                            },
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ], symbolSize: 60
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                };
                charttem.showLoading();
                charthumi.showLoading();
                app.request({
                    async: true,
                    //url: '../../index.php/Home/TemHumiApp/loadDataHistory',
                    url: URL_HEADER+'loadDataHistory',
                    data: params,
                    dataType: 'json',
                    timeout: 30000,
                    success: function (data, status, xhr) {
                        //console.info(data);
                        var dataTime = [];
                        var dataTime1 = [];

                        var data_tem = [];
                        var data_humi = [];

                        for (var i = 0; i < data.length; i++) {
                            //console.info(i);
                            if (data[i].di === '0000T' || data[i].di === 'F1') {
                                data_tem.push(formatFloat(data[i].value, 2));
                                dataTime.push(data[i].readdate);
                            }
                            if (data[i].di === '0000H') {
                                data_humi.push(formatFloat(data[i].value, 2));
                                dataTime1.push(data[i].readdate);
                            }
                        }

                        //console.info(data_tem);
                        //console.info(data_humi);
                        charttemOption.series[0].data = data_tem;
                        charttemOption.xAxis.data = dataTime;
                        charttem.setOption(charttemOption);

                        charthumiOption.series[0].data = data_humi;
                        charthumiOption.xAxis.data = dataTime;
                        charthumi.setOption(charthumiOption);

                        //console.info(charttem);
                        //console.info(charthumi);
                    },
                    error: function (xhr, status) {
                    },
                    complete: function (xhr, status) {
                        charttem.hideLoading();
                        charthumi.hideLoading();
                    }
                });
            },
            pageAfterOut: function (e, page) {
                // page has left the view
            },
        },
        methods: {
            helloWorld: function () {
                var self = this;
                self.$app.dialog.alert('Hello world!');
            },
        }
    };
</script>